
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Python Flask Bucket List App</title>

   
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
    <link href="../static/css/signup.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.2.js"></script>
    <script>
	$(function(){
		$.ajax({
			url : '/getWish',
			type : 'GET',
			success: function(res){
				var div = $('<div>')
    .attr('class', 'list-group')
    .append($('<a>')
        .attr('class', 'list-group-item active')
        .append($('<h4>')
            .attr('class', 'list-group-item-heading'),
            $('<p>')
            .attr('class', 'list-group-item-text')));
							    
				
				
				var wishObj = JSON.parse(res);
				var wish = '';
				
				$.each(wishObj,function(index, value){
					wish = $(div).clone();
					$(wish).find('h4').text(value.Title);
					$(wish).find('p').text(value.Description);
					$('.jumbotron').append(wish);
				});
			},
			error: function(error){
				console.log(error);
			}
		});
	});
    </script>
    
   
  </head>

  <body>

    <div class="container">
      <div class="header">
        <nav>
          <ul class="nav nav-pills pull-right">
	    <li role="presentation"><a href="/showAddWish">Add Wish</a></li>
            <li role="presentation" class="active"><a href="/logout">Logout</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">Python Flask App</h3>
      </div>

      <div class="jumbotron">
        

	



	





       
      </div>

      

      <footer class="footer">
        <p>&copy; Company 2015</p>
      </footer>

    </div>
  </body>
</html>

